<template>
  <div id="home-coverage" class="component">
    <div id="home-coverage-main" class="ptop">
      <div class="slogen"></div>
      <div class="circle">
        <!--圆形区域-->
        <transition name="circleMove">
          <div class="circle-wrap" v-if="isShow">
            <div class="circle-top-wrap circleContainer" id="circle-top">
              <circleComponent :circleInfo="circleList.top"></circleComponent>
            </div>
            <div class="circle-left-wrap circleContainer" id="circle-left">
              <circleComponent :circleInfo="circleList.left"></circleComponent>
            </div>
            <div class="circle-left2-wrap circleContainer" id="circle-left2">
              <circleComponent :circleInfo="circleList.left2"></circleComponent>
            </div>
            <div class="circle-left3-wrap circleContainer" id="circle-left3">
              <circleComponent :circleInfo="circleList.left3"></circleComponent>
            </div>
            <div class="circle-left4-wrap circleContainer" id="circle-left4">
              <circleComponent :circleInfo="circleList.left4"></circleComponent>
            </div>
            <div class="circle-right-wrap circleContainer" id="circle-right">
              <circleComponent :circleInfo="circleList.right"></circleComponent>
            </div>
            <div class="circle-right2-wrap circleContainer" id="circle-right2">
              <circleComponent :circleInfo="circleList.right2"></circleComponent>
            </div>
            <div class="circle-right3-wrap circleContainer" id="circle-right3">
              <circleComponent :circleInfo="circleList.right3"></circleComponent>
            </div>
            <div class="circle-right4-wrap circleContainer" id="circle-right4">
              <circleComponent :circleInfo="circleList.right4"></circleComponent>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
  import circleComponent from '@/components/home/circle'

  export default{
    data () {
      return {
        circleList: {
          top: {src: require('@/assets/home/circle-05.png'), title: '- 软件信息技术服务 -'},
          left: {src: require('@/assets/home/circle-03.png'), numMsg: '- 政府办公 -'},
          left2: {src: require('@/assets/home/circle-04.png'), numMsg: '- 医疗 -'},
          left3: {src: require('@/assets/home/circle-02.png'), txtMgs: '- 制造 -'},
          left4: {src: require('@/assets/home/circle-01.png'), txtMgs: '- 军队 -'},
          right: {src: require('@/assets/home/circle-09.png'), txtMgs: '- 仓库物流 -'},
          right2: {src: require('@/assets/home/circle-06.png'), txtMgs: '- 批发零售 -'},
          right3: {src: require('@/assets/home/circle-07.png'), numMsg: '- 农业 -'},
          right4: {src: require('@/assets/home/circle-08.png'), txtMgs: '- 教育 -'}
        }
      }
    },
    props: {
      isShow: {
        type: Boolean  // 触发显示隐藏动画
      }
    },
    computed: {},
    methods: {
    },
    components: {
      circleComponent
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  #home-coverage
    background-image: url('../../assets/home/home-bg.png')
    #home-coverage-main
      .slogen
        background-image: url("../../assets/home/coverage.png")
      .circle
        position: relative
        margin:0 auto
        top: 40%
        max-width: 1200px
        height: 380px
        .circle-wrap
          position: relative
          width:100%
          transition: all .5s ease-in
          &.circleMove-enter-active
            .circleContainer
              opacity:1
            .circle-top-wrap
              transition-delay: 0.1s
            .circle-top-left,.circle-top-right
              transition-delay: 0.1s
           &.circleMove-enter,&.circleMove-leave-active
            .circle-top-wrap
              top: 100px
              left: 42%
              opacity:0
            .circle-left-wrap
              top: 100px
              left: 42%
              opacity:0
            .circle-left2-wrap
              top: 100px
              left: 42%
              opacity:0
            .circle-left3-wrap
              top: 100px
              left: 42%
              opacity:0
            .circle-left4-wrap
              top: 100px
              left: 42%
              opacity:0
             .circle-right-wrap
              top: 100px
              right: 42%
              opacity:0
             .circle-right2-wrap
              top: 100px
              right: 42%
              opacity:0
             .circle-right3-wrap
              top: 100px
              right: 42%
              opacity:0
             .circle-right4-wrap
              top: 100px
              right: 42%
              opacity:0
          &>div
            position: absolute
            transition:all 0.5s
            opacity: 1
            transition-timing-function: cubic-bezier(0, .57, .44, 1.97)

          .circle-top-wrap
            top: 30px
            left: 42%
            transition:all 1s;
            transition-delay: 0.2s
          .circle-left-wrap
            top: 20px
            left: 18%
            transition:all 1s;
            transition-delay: 0.2s
          .circle-left2-wrap
            top: 160px
            left: 28%
            transition:all 1s;
            transition-delay: 0.2s
          .circle-left3-wrap
            top: 240px
            left: 12%
            transition:all 1s;
            transition-delay: 0.2s
          .circle-left4-wrap
            top: 100px
            left: 0%
            transition:all 1s;
            transition-delay: 0.2s

          .circle-right-wrap
            transition:all 1s;
            transition-delay: 0.2s
            top: 80px;
            right: 0%;
          .circle-right2-wrap
            transition:all 1s;
            transition-delay: 0.2s
            top: -50px
            right: 25%
          .circle-right3-wrap
            transition:all 1s;
            transition-delay: 0.2s
            top: 70px
            right: 17%
          .circle-right4-wrap
            transition:all 1s;
            transition-delay: 0.2s
            top: 240px
            right: 23%
</style>
